<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../WEB-INF/facelets/layout.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:param name="title" value="camelBlog"/>
    <ui:param name="headerTitle" value="camelBlog"/>
    <ui:define name="content">
        
         <c:if test="${addUserBackingBean.message != ''}" >
        <h:outputText styleClass="ui-state-error ui-corner-all" style="padding: 0 .7em" value="#{addUserBackingBean.message}"/>
         </c:if>
        <h:form >
            

            <p:panel header="Create new user"   >  
                <h:panelGrid columns="3" >  
                    <h:outputText value="Enter Name:"/>
                    <p:inputText id="userName" value="#{addUserBackingBean.userName}" 
                                 label="User Name">  
                        <p:ajax event="blur" update="userNameMsg" />  
                    </p:inputText> 
                    <p:message id="userNameMsg" for="userName" />

                    <h:outputText value="Enter Password:" />  
                    <p:password  id="password" value="#{addUserBackingBean.password}" label="Password">
                        <p:ajax event="blur" update="passwordMsg" />  
                    </p:password> 
                    <p:message id="passwordMsg" for="password" />

                    <h:outputText value="Enter First Name:" />
                    <p:inputText id="firstName" value="#{addUserBackingBean.firstName}" 
                                 label="First Name">  
                        <p:ajax event="blur" update="firstNameMsg" />  
                    </p:inputText> 
                    <p:message id="firstNameMsg" for="firstName" />

                    <h:outputText value="Enter Last Name:"/>
                    <p:inputText id="lastName" value="#{addUserBackingBean.lastName}" 
                                 label="Last Name">  
                        <p:ajax event="blur" update="lastNameMsg" />  
                    </p:inputText> 
                    <p:message id="lastNameMsg" for="lastName" />

                    <h:outputText value="Enter Email:"/>
                    <p:inputText id="email" value="#{addUserBackingBean.email}" 
                                 label="Email">  
                        <p:ajax event="blur" update="emailMsg" />  
                    </p:inputText> 
                    <p:message id="emailMsg" for="email" />

                    <br/>
                    <h:commandButton action="#{addUserControllerBean.navigate}"  actionListener="#{addUserControllerBean.doCreateUser}" value="Create" />
                </h:panelGrid>
            </p:panel>
        </h:form>

        <script type="text/javascript">
            function fadein(input, container) {
                container.fadeIn("slow");
            }

            function fadeout(input, container) {
                container.fadeOut("slow");
            }
        </script>
    </ui:define>
</ui:composition>

